<template>
    <form>
        <!-- 用户名输入框 -->
        <div class="user_name_input">
            <label class="user_name_label" for="user_name">
                <span :class="userNameSpan">请输入用户名/账号/手机号码</span>
            </label>
            <input 
             id="user_name"
             type="text"
             required="required"
             v-model="userNameText" 
             @focus="userNameSpanRise" 
             @blur="userNameSpanDrop"
            >
            <div :class="userNameunderline"></div>
        </div>
        <!-- 密码输入框 -->
        <div class="user_password_input">
            <label class="user_password_label" for="user_password">
                <span :class="userPasswordSpan">请输入密码</span>
            </label>
            <input
             id="user_password"
             type="password"
             name="userPassword"
             autocomplete="off"
             required="required"
             v-model="userPasswordText"
             @focus="userPasswordSpanRise"
             @blur="userPasswordSpanDrop"
            >
            <div :class="passwordunderline"></div>
        </div>
    </form>
    <!-- 登录按钮 -->
    <button id="login_btn" @click="login">登&nbsp;录</button>
</template>

<script>
import {ref, watch} from 'vue'
export default {
    name:'SimpleLoginBox',
    setup() {
        let n = 0 //避免第一次输入变红
        let userNameSpan = ref(['placeholder'])
        let userPasswordSpan = ref(['placeholder'])
        let userNameunderline = ref(['underline'])
        let passwordunderline = ref(['underline'])
        let userNameText = ref('')
        let userPasswordText = ref('')

        //侦听输入框的内容变化，判断输入框是否为空
        watch([userNameText, userPasswordText], (value) => {
            inputIsNull(value)
        })

        //提交表单数据并登录
        function login() {
           let isNull = inputIsNull([userNameText.value, userPasswordText.value])
           if(isNull === 0) {
               alert('用户名/账号/手机号 和 密码: 不能为空！')
               return;
           }else if(isNull === 1) {
               alert('用户名/账号/手机号: 不能为空！')
               return;
           }else if(isNull === 2) {
               alert('密码: 不能为空！')
               return;
           }

           //以下可以发送Ajax请求

        }

        //判断输入框是否为空
        function inputIsNull(value) {
            if(value[0] === '' && value[1] === '') {
                userNameunderline.value.splice(1, 1, 'is_null')
                passwordunderline.value.splice(1, 1, 'is_null')
                return 0
            }else {
                if(value[0] === '') {
                    if(n === 1) userNameunderline.value.splice(1, 1, 'is_null')
                    passwordunderline.value.splice(1, 1, '')
                    return 1
                }else if(value[1] === '') {
                    if(n === 1) passwordunderline.value.splice(1, 1, 'is_null')
                    userNameunderline.value.splice(1, 1, '')
                    return 2
                }else {
                    userNameunderline.value.splice(1, 1, '')
                    passwordunderline.value.splice(1, 1, '')
                }
            }
            n = 1
        }

        //控制输入框中的提示文字动画
        function userNameSpanRise(){
            userNameSpan.value.splice(1, 1, 'placeholder_rise')
        }
        function userNameSpanDrop(){
            if(userNameText.value === '') {
                userNameSpan.value.splice(1, 1, 'placeholder_drop')
            }
        }
        function userPasswordSpanRise(){
            userPasswordSpan.value.splice(1, 1, 'placeholder_rise')
        }
        function userPasswordSpanDrop(){
            if(userPasswordText.value === '') {
                userPasswordSpan.value.splice(1, 1, 'placeholder_drop')
            }
        }

        return {
            userNameSpan,
            userPasswordSpan,
            userNameunderline,
            passwordunderline,
            userNameText,
            userPasswordText,
            login,
            userNameSpanRise,
            userNameSpanDrop,
            userPasswordSpanRise,
            userPasswordSpanDrop
        }
    }
}
</script>

<style scoped lang="css">
/* 用户名输入框 */
/* 密码输入框 */
.user_name_input,
.user_password_input {
    overflow: hidden;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 85%;
    height: 50px;
}
.user_name_input {
    margin-top: 59px;
    margin-bottom: 0px;
}
.user_password_input {
    margin-top: 30px;
    margin-bottom: 0px;
}
.user_name_input .placeholder,
.user_password_input .placeholder {
    position: absolute;
    display: block;
    top: 23px;
    left: 15px;
    font-size: 1.2rem;
    color: rgb(190, 190, 190);
    cursor: text;
}
.placeholder_rise {
    animation: placeholderRise 0.5s ease 0s forwards;
}
@keyframes placeholderRise {
    0%{
        transform: translate(0px, 0px);
        color: rgb(190, 190, 190);
    }
    100%{
        transform: translate(-10px,-25px);
        color: #000;
    }
}
.placeholder_drop {
    animation: placeholderDrop 0.5s ease 0s forwards;
}
@keyframes placeholderDrop {
    0%{

        transform: translate(-10px,-25px);
        color: #000;
    }
    100%{
        transform: translate(0px, 0px);
        color: rgb(190, 190, 190);
    }
}
.user_name_input #user_name ,
.user_password_input #user_password {
    padding-top: 14px;
    padding-left: 15px;
    width: 100%;
    height: 100%;
    font-size: 1.5rem;
    border: 0px;
    outline: none;
    background-color: transparent;
    
}
.user_name_input .underline,
.user_password_input .underline {
    position: absolute;
    top: 43px;
    width: 100%;
    height: 2px;
    border-radius: 50%;
    background-color: #000;
}
.is_null {
    box-shadow: 0px 0px 1px 2px red;
    animation: isNullMov 0.2s ease 0s forwards;
}
@keyframes isNullMov {
    0%{
        transform: translate(0px, 0px)
    }
    10%{
        transform: translate(-5px, -5px)
    }
    20%{
        transform: translate(5px, 5px)
    }
    100%{
        transform: translate(0px, 0px)
    }
}

/* 登录按钮 */
.simple_form_box #login_btn {
    float: right;
    margin-top: 25px;
    margin-right: 45px;
    width: 90px;
    height: 50px;
    border: 0px;
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
    background-color: rgb(138, 187, 252);
    cursor: pointer;
}
.simple_form_box #login_btn:hover {
    color: rgb(255, 255, 255);
    background-color: rgb(107, 170, 253);
}
</style>